<html>
<head>
<style>
    div[foo] { background-color: green; }
    div[bar] > div { background-color: red; }
    div[baz] ~ div { background-color: blue; }
</style>
</head>
<body>
    <div id=bar><div>RED</div></div>
    <div id=foo>GREEN</div>
    <div id=baz></div>
    <div>BLUE</div>
    <script>
        setTimeout(function() {
            for (let id of ["foo", "bar", "baz"]) {
                let e = document.getElementById(id);
                e.setAttribute(id, "");
            }
            setTimeout(function() {
                for (let id of ["foo", "bar", "baz"]) {
                    let e = document.getElementById(id);
                    e.removeAttribute(id);
                }
            }, 1000);
        }, 1000);
    </script>
</body>
</html>
